<template>
    <!-- 群聊信息展示组件 -->
    <div class="top-panel">
        <el-card>
            <el-form :model="searchForm" label-width="80px" label-position="right">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="群组ID" label-width="55px">
                            <el-input class="password-input" v-model="searchForm.groupId" clearable
                                @keyup.enter="loadDataList">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="群名称">
                            <el-input class="password-input" v-model="searchForm.groupName" clearable
                                placeholder="支持模糊搜索" @keyup.enter="loadDataList">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="群主UID">
                            <el-input class="password-input" v-model="searchForm.groupOwnerId" clearable
                                @keyup.enter="loadDataList">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" :style="{ paddingLeft: '40px' }">
                        <el-button type="success" @click="loadDataList">查询</el-button>
                    </el-col>
                    <el-col :span="1">
                        <div class="iconfont icon-shuaxin" style="padding-top: 4px;" @click="loadDataList"></div>
                    </el-col>
                </el-row>
            </el-form>
            <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
                <template #slotAvatar="{ row }">
                    <AvatarBase :width="50" :userId="row.groupId" partType="avatar"></AvatarBase>
                </template>
                <template #slotGroupName="{ row }">
                    {{ row.groupName }}
                </template>
                <template #slotGroupId="{ row }">
                    {{ row.groupId.substring(1) }}
                </template>
                <template #slotGroupOwnerNickName="{ row }">
                    {{ row.groupOwnerNickName }}
                </template>
                <template #slotGroupOwnerId="{ row }">
                    {{ row.groupOwnerId.substring(1) }}
                </template>
                <template #slotJoinType="{ row }">
                    <div>{{ row.joinType == 0 || row.joinType == 'JOIN_DIRECTLY' ? '直接加入' : '群主同意后加入' }}</div>
                </template>
                <template #slotStatus="{ row }">
                    <div>
                        <span v-if="row.status == 0 || row.status == 'DISBAND'" style="color:red">已解散</span>
                        <span v-if="row.status == 1 || row.status == 'NORMAL'" style="color: green">正常</span>
                    </div>
                </template>
                <template #slotOperation="{ row }">
                    <div class="row-op-panel">
                        <a href="javascript:void(0)" @click="disbandGroup(row)"
                            v-if="row.status == 1 || row.status == 'NORMAL'">解散</a>
                    </div>
                </template>
            </Table>
        </el-card>
    </div>
</template>

<script setup>
import AvatarBase from "@/components/AvatarBase.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const tableData = ref({})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    params = Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: proxy.Api.loadGroup,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
}

const disbandGroup = async (data) => {
    proxy.Confirm({
        message: `确定要解散群聊【${data.groupName}】吗？`,
        okFun: async () => {
            let result = await proxy.Request({
                method: 'delete',
                url: proxy.Api.adminDisbandGroup,
                params: {
                    groupId: data.groupId
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success(`群聊解散成功`)
            loadDataList()
        }
    })
}

const columns = [
    {
        label: '头像',
        prop: 'groupId',
        width: 70,
        scopedSlots: 'slotAvatar'
    },
    {
        label: '群名称',
        prop: 'groupName',
        scopedSlots: 'slotGroupName'
    },
    {
        label: '群聊天ID',
        prop: 'groupId',
        scopedSlots: 'slotGroupId'
    },
    {
        label: '群主',
        prop: 'groupOwnerNickName',
        scopedSlots: 'slotGroupOwnerNickName'
    },
    {
        label: '群主ID',
        prop: 'groupOwnerId',
        scopedSlots: 'slotGroupOwnerId'
    },
    {
        label: '群成员数量',
        prop: 'memberCount',
    },
    {
        label: '创建时间',
        prop: 'createTime',
        width: 200,
    },
    {
        label: '加入方式',
        prop: 'joinType',
        width: 150,
        scopedSlots: 'slotJoinType'
    },
    {
        label: '状态',
        prop: 'status',
        scopedSlots: 'slotStatus'
    },
    {
        label: '操作',
        prop: 'operation',
        width: 80,
        scopedSlots: 'slotOperation'
    },
]
</script>

<style lang="scss" scoped></style>
